<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 30000px;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: #ccc;
            margin-top: 130px;
            margin-left: 200px;
            
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 获取鼠标在盒子里面的坐标：
        var div = document.querySelector('div')
        div.addEventListener('click',function (e){
            // 1.获取可视区的x y坐标
            // console.log(e.clientX,e.clientY);
            // 2.页面文档的x,y坐标
             console.log(e.pageX,e.pageY);
            // 3.电脑屏幕上的x,y坐标，如果浏览器被缩小的情况下
            // console.log(e.screenX,e.screenY);
            console.log('鼠标在盒子的距离是',e.pageX - div.offsetLeft , e.pageY - div.offsetTop );
        })
    </script>
</body>
</html>